<template>
  <div class="public-views news">
    <div class="public-inner">
      <div class="news-left">
        <ul class="news-nav">
            <li v-for="item in newsNav" :class="{'news-nav-activate': item.view === currentView}" @click="currentView = item.view">{{item.text}}</li>
          </ul>
          <div class="news-content">
            <component :is="currentView"></component>
          </div>
      </div>
      <div class="news-right">
        <!-- 热点新闻  -->
        <div class="right-hot-news">
          <h3 class="home-title">热点新闻</h3>
          <a href="javascript:;"><span class="news">新闻</span>星趣米娱即将融资期待...</a>
          <a href="javascript:;"><span class="raiders">攻略</span>星趣米娱即将融资期待...</a>
          <a href="javascript:;"><span class="review">测评</span>星趣米娱即将融资期待...</a>
          <a href="javascript:;"><span class="activity">活动</span>星趣米娱即将融资期待...</a>
          <a href="javascript:;"><span class="news">新闻</span>星趣米娱即将融资期待...</a>
          <a href="javascript:;"><span class="review">测评</span>星趣米娱即将融资期待...</a>
        </div>
        <!-- 热点活动  -->
        <div class="right-hot-activity">
          <div class="padding"><h3 class="home-title">热点活动</h3></div>
          <i v-lazy:background-image="'https://gitee.com/index/ent_poster/banner_4_2.png'"></i>
          <i v-lazy:background-image="'https://gitee.com/index/ent_poster/banner_4_2.png'"></i>
        </div>
        <!-- 大家都在玩  -->
        <right-sidebar-play v-if="NewsGame" :list="NewsGame"></right-sidebar-play>
      </div>
    </div>
  </div>
</template>

<script>
// const rightSidebarPlay = import('@/components/rightSidebarPlay.vue')


const newsList = () => import('./module/newsList.vue')
const raidersList = () => import('./module/newsList.vue')
const reviewList = () =>import('./module/reviewList.vue')
const activityList = () =>import('./module/activityList.vue')

export default {
  title() {
    return `米娱游戏_游戏资讯`
  },
  components: {
    // rightSidebarPlay,
    newsList,
    raidersList,
    reviewList,
    activityList
  },
  asyncData({ store, route }) {
    const s = parseInt(Math.random() * 200 + 1)
    const e = parseInt(Math.random() * 15 + 10)
    return store.dispatch('fetchGiftGame', { start: s, end: e, cache: true })
   
  },
  computed: {
    NewsGame: function() {
      return this.$store.state.GiftGame
    },
    message: function() {
      return this.$store.state.message
     
    },
  
  
  },
  data() {
    return {
      newsNav: [
        { text: '新闻', activate: true, view: 'newsList' },
        { text: '攻略', activate: false, view: 'raidersList' },
        { text: '测评', activate: false, view: 'reviewList' },
        { text: '活动', activate: false, view: 'activityList' }
      ],
      currentView: 'newsList'
    }
  },
  methods: {
    
  }
}
</script>

<style lang="less" scoped>
.news-left {
  width: 900px;
  float: left;
  margin-bottom: 40px;
  .news-nav {
    overflow: hidden;
    li {
      line-height: 70px;
      width: 225px;
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      -o-box-sizing: border-box;
      text-align: center;
      float: left;
      box-shadow: 0 5px 5px 0 #eee inset;
      font-weight: 600;
      border-right: 1px solid #e1e1e1;
      &:nth-child(4) {
        border-right: 0;
      }
    }
    .news-nav-activate {
      background: #fff;
      box-shadow: none;
      color: #ffa93a;
    }
  }
  .news-content {
    background: #fff;
    margin-top: -1px;
    box-shadow: 0 1px 5px 0 #eee;
    padding: 30px 30px 50px 35px;
  }
}
.news-right {
  width: 260px;
  float: right;
  .right-hot-news {
    background: #fff;
    padding: 0 20px 20px;
    margin-bottom: 40px;
    box-shadow: 1px 1px 10px 1px #ddd;
    .home-title {
      line-height: 70px;
      border-bottom: 1px solid #eee;
      margin-bottom: 10px;
    }
    a {
      display: block;
      line-height: 44px;
      font-size: 14px;
      padding-left: 68px;
      position: relative;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    span {
      width: 50px;
      line-height: 24px;
      height: 24px;
      position: absolute;
      left: 0;
      top: 10px;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      color: #fff;
      text-align: center;
    }
    .news {
      background-image: url('../../assets/icon/news_orange_icon.png');
    }
    .raiders {
      background-image: url('../../assets/icon/news_blue_icon.png');
    }
    .review {
      background-image: url('../../assets/icon/news_green_icon.png');
    }
    .activity {
      background-image: url('../../assets/icon/news_red_icon.png');
    }
  }
  .right-hot-activity {
    background: #fff;
    padding: 0 0 20px;
    margin-bottom: 40px;
    box-shadow: 1px 1px 10px 1px #ddd;
    .padding {
      padding-left: 20px;
    }
    .home-title {
      line-height: 70px;
    }
    i {
      display: block;
      height: 148px;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      margin-bottom: 20px;
    }
  }
}
</style>

